<%--
  Created by IntelliJ IDEA.
  User: 18360
  Date: 2018-11-27
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common1.jsp"></jsp:include>

    <script type="text/javascript">



        $(function () {
            $.post("${pageContext.request.contextPath}/jinhuoxx/query1",function (data) {
                var a = $("#biao");
                for (var i=0 ;i < data.length;i++) {
                    a.append("<tr>"+"<td>"+data[i].spname+"</td>"+"<td>"+data[i].spshu+"</td>"+"<td>"+data[i].splei+"</td>"+"<td>"+data[i].spdan+"</td>"+"</tr>")

                }
            });
        });

        $(function () {
            $('#tb').bootstrapTable({
                url: '${pageContext.request.contextPath}/jinhuoxx/query1',
                columns: [{
                    field: 'spname',
                    title: '商品名称',
                    align:'center'
                }, {
                    field: 'spshu',
                    title: '商品数量',
                    align:'center'
                }, {
                    field: 'leibie.lname',
                    title: '商品类别',
                    align:'center'
                },{
                    field:'danwei.dname',
                    title:'商品单位',
                    align:'center'
                }
                ]
            });
        })
    </script>

</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight" >
    <div class="row" >
        <div class="col-sm-12" >
            <div class="ibox float-e-margins" >
                <div class="ibox-title">
                    <h3>商品进货排行榜</h3>
                </div>
                <%--<form action="" class="form-inline">--%>
                    <%--<div class="col-sm-4 col-sm-offset-4 text-right" style="float: right;margin-top: -40px;">--%>
                        <%--<input id="sname" type="text" class="form-control">--%>
                        <%--<input onclick="searcha()" type="button" class="btn btn-primary" value="查询">--%>
                    <%--</div>--%>
                <%--</form>--%>
                <div class="ibox-content" style=" width: 530px; float: right; height: 400px;">

                    <table id="tb" class="footable table table-stripped" data-page-size="8" data-filter=#filter></table>
                </div>
                <div style="float: left;">
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 700px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var dataAxis = [];
        var data1 = [];
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data1.length; i++) {
            dataShadow.push(yMax);

        }
        $(document).ready(function(){
            $.ajaxSettings.async=false;
            $.post("${pageContext.request.contextPath}/jinhuoxx/query1",function (data) {
                for (var i = 0; i < data.length; i++) {
                    dataAxis.push(data[i].spname);
                    data1.push(data[i].spshu);
                }

            });
            $.post("${pageContext.request.contextPath}/jinhuoxx/query1",function (data) {


                // chong = JSON.stringify(aaa);
                // return chong;
                claim=data
            });


        option = {
            title: {
                text: '',
                subtext: ''
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                { // For shadow
                    type: 'bar',
                    itemStyle: {
                        normal: {color: 'rgba(0,0,0,0.05)'}
                    },
                    barGap:'-100%',
                    barCategoryGap:'40%',
                    data:dataAxis,
                    animation: false
                },
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data1
                }
            ]
        };

        // Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        })
     </script>


</body>
</html>
